<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 启用/禁用功能</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .header h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .search-bar {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .search-input {
            width: 300px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-right: 10px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #0056b3;
        }
        
        .btn-success {
            background-color: #28a745;
            color: white;
        }
        
        .btn-success:hover {
            background-color: #1e7e34;
        }
        
        .btn-danger {
            background-color: #dc3545;
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #c82333;
        }
        
        .btn-warning {
            background-color: #ffc107;
            color: #212529;
        }
        
        .btn-warning:hover {
            background-color: #e0a800;
        }
        
        .table-container {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .table th {
            background-color: #f8f9fa;
            padding: 15px;
            text-align: left;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
        }
        
        .table td {
            padding: 15px;
            border-bottom: 1px solid #dee2e6;
        }
        
        .table tr:hover {
            background-color: #f8f9fa;
        }
        
        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-enabled {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-disabled {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .toggle-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s ease;
            min-width: 80px;
        }
        
        .toggle-btn.enabled {
            background-color: #dc3545;
            color: white;
        }
        
        .toggle-btn.enabled:hover {
            background-color: #c82333;
        }
        
        .toggle-btn.disabled {
            background-color: #28a745;
            color: white;
        }
        
        .toggle-btn.disabled:hover {
            background-color: #1e7e34;
        }
        
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }
        
        .message {
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            display: none;
        }
        
        .message.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .message.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            gap: 10px;
        }
        
        .pagination button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            border-radius: 3px;
        }
        
        .pagination button:hover {
            background-color: #f8f9fa;
        }
        
        .pagination button.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
        
        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>用户管理系统</h1>
            <p>管理用户状态，支持启用/禁用切换功能</p>
        </div>
        
        <div id="message" class="message"></div>
        
        <div class="search-bar">
            <input type="text" id="searchInput" class="search-input" placeholder="搜索用户名或手机号...">
            <button class="btn btn-primary" onclick="searchUsers()">搜索</button>
            <button class="btn btn-warning" onclick="refreshData()">刷新</button>
            <button class="btn btn-success" onclick="batchEnable()">批量启用</button>
            <button class="btn btn-danger" onclick="batchDisable()">批量禁用</button>
        </div>
        
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll" onchange="toggleSelectAll()"></th>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>手机号</th>
                        <th>状态</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="userTableBody">
                    <!-- 用户数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
        
        <div class="pagination" id="pagination">
            <!-- 分页控件将通过JavaScript动态生成 -->
        </div>
    </div>

    <script>
        // 全局变量
        let currentPage = 1;
        let pageSize = 10;
        let totalPages = 1;
        let users = [];
        let selectedUsers = new Set();

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadUsers();
        });

        // 加载用户数据
        async function loadUsers(page = 1) {
            try {
                showLoading(true);
                
                const response = await fetch('/admin/FindPage', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        current: page,
                        size: pageSize,
                        username: document.getElementById('searchInput').value || null,
                        phone: document.getElementById('searchInput').value || null
                    })
                });

                const result = await response.json();
                
                if (result.code === 200) {
                    users = result.data.records || [];
                    totalPages = Math.ceil(result.data.total / pageSize);
                    currentPage = page;
                    
                    renderUserTable();
                    renderPagination();
                } else {
                    showMessage('加载用户数据失败: ' + result.message, 'error');
                }
            } catch (error) {
                showMessage('网络错误: ' + error.message, 'error');
            } finally {
                showLoading(false);
            }
        }

        // 渲染用户表格
        function renderUserTable() {
            const tbody = document.getElementById('userTableBody');
            tbody.innerHTML = '';

            users.forEach(user => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>
                        <input type="checkbox" class="user-checkbox" value="${user.id}" 
                               onchange="toggleUserSelection(${user.id})">
                    </td>
                    <td>${user.id}</td>
                    <td>${user.username || '-'}</td>
                    <td>${user.nickname || '-'}</td>
                    <td>${user.phone || '-'}</td>
                    <td>
                        <span class="status-badge ${user.status === 1 ? 'status-enabled' : 'status-disabled'}">
                            ${user.status === 1 ? '启用' : '禁用'}
                        </span>
                    </td>
                    <td>${formatDate(user.createdAt)}</td>
                    <td>
                        <button class="toggle-btn ${user.status === 1 ? 'enabled' : 'disabled'}" 
                                onclick="toggleUserStatus(${user.id})" 
                                data-user-id="${user.id}">
                            ${user.status === 1 ? '禁用' : '启用'}
                        </button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        // 渲染分页控件
        function renderPagination() {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            // 上一页按钮
            const prevBtn = document.createElement('button');
            prevBtn.textContent = '上一页';
            prevBtn.disabled = currentPage === 1;
            prevBtn.onclick = () => loadUsers(currentPage - 1);
            pagination.appendChild(prevBtn);

            // 页码按钮
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);

            for (let i = startPage; i <= endPage; i++) {
                const pageBtn = document.createElement('button');
                pageBtn.textContent = i;
                pageBtn.className = i === currentPage ? 'active' : '';
                pageBtn.onclick = () => loadUsers(i);
                pagination.appendChild(pageBtn);
            }

            // 下一页按钮
            const nextBtn = document.createElement('button');
            nextBtn.textContent = '下一页';
            nextBtn.disabled = currentPage === totalPages;
            nextBtn.onclick = () => loadUsers(currentPage + 1);
            pagination.appendChild(nextBtn);
        }

        // 切换用户状态
        async function toggleUserStatus(userId) {
            try {
                const button = document.querySelector(`[data-user-id="${userId}"]`);
                button.classList.add('loading');

                const response = await fetch('/admin/toggleUserStatus', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `userId=${userId}`
                });

                const result = await response.json();
                
                if (result.code === 200) {
                    showMessage(result.message, 'success');
                    // 重新加载数据
                    loadUsers(currentPage);
                } else {
                    showMessage('操作失败: ' + result.message, 'error');
                }
            } catch (error) {
                showMessage('网络错误: ' + error.message, 'error');
            } finally {
                const button = document.querySelector(`[data-user-id="${userId}"]`);
                button.classList.remove('loading');
            }
        }

        // 批量启用用户
        async function batchEnable() {
            if (selectedUsers.size === 0) {
                showMessage('请先选择要启用的用户', 'error');
                return;
            }

            if (!confirm(`确定要启用选中的 ${selectedUsers.size} 个用户吗？`)) {
                return;
            }

            await batchToggleStatus(Array.from(selectedUsers), 1);
        }

        // 批量禁用用户
        async function batchDisable() {
            if (selectedUsers.size === 0) {
                showMessage('请先选择要禁用的用户', 'error');
                return;
            }

            if (!confirm(`确定要禁用选中的 ${selectedUsers.size} 个用户吗？`)) {
                return;
            }

            await batchToggleStatus(Array.from(selectedUsers), 0);
        }

        // 批量切换状态
        async function batchToggleStatus(userIds, status) {
            try {
                const response = await fetch('/admin/batchToggleUserStatus', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        userIds: userIds,
                        status: status
                    })
                });

                const result = await response.json();
                
                if (result.code === 200) {
                    showMessage(result.message, 'success');
                    selectedUsers.clear();
                    document.getElementById('selectAll').checked = false;
                    loadUsers(currentPage);
                } else {
                    showMessage('批量操作失败: ' + result.message, 'error');
                }
            } catch (error) {
                showMessage('网络错误: ' + error.message, 'error');
            }
        }

        // 搜索用户
        function searchUsers() {
            loadUsers(1);
        }

        // 刷新数据
        function refreshData() {
            document.getElementById('searchInput').value = '';
            selectedUsers.clear();
            document.getElementById('selectAll').checked = false;
            loadUsers(1);
        }

        // 全选/取消全选
        function toggleSelectAll() {
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.user-checkbox');
            
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAll.checked;
                if (selectAll.checked) {
                    selectedUsers.add(parseInt(checkbox.value));
                } else {
                    selectedUsers.delete(parseInt(checkbox.value));
                }
            });
        }

        // 切换单个用户选择
        function toggleUserSelection(userId) {
            if (selectedUsers.has(userId)) {
                selectedUsers.delete(userId);
            } else {
                selectedUsers.add(userId);
            }
            
            // 更新全选状态
            const checkboxes = document.querySelectorAll('.user-checkbox');
            const selectAll = document.getElementById('selectAll');
            selectAll.checked = checkboxes.length > 0 && 
                               Array.from(checkboxes).every(cb => cb.checked);
        }

        // 显示/隐藏加载状态
        function showLoading(show) {
            const table = document.querySelector('.table-container');
            if (show) {
                table.classList.add('loading');
            } else {
                table.classList.remove('loading');
            }
        }

        // 显示消息
        function showMessage(message, type) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = message;
            messageDiv.className = `message ${type}`;
            messageDiv.style.display = 'block';
            
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 3000);
        }

        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }
    </script>
</body>
</html> 